import React, {useEffect} from "react";
import _ from "lodash";
import {Card, Layout, Carousel} from "antd";
import {useNavigate} from "react-router-dom";

import "./index.less";
import {typeList} from "../../utils/data";
import Icons from "../../components/Icons";
import {mImg} from "@/assets/img";
const {Header, Content} = Layout;

const Home: React.FC = () => {
    const nav = useNavigate();
    useEffect(() => {
        const isLogin = localStorage.getItem("admin") || false;
        if (!isLogin) {
            nav("/", {replace: true});
        }
    }, [nav]);

    const handleClick = ({id}) => {
        const url = `/content/${id}`;
        nav(url);
    };

    return (
        <Layout className="page-layout">
            <Header className="header">
                <Carousel className="swiper" autoplay arrows autoplaySpeed={2000}>
                    {_.map(mImg, (src, key) => (
                        <div key={key}>
                            <img src={src} alt="" />
                        </div>
                    ))}
                </Carousel>
            </Header>
            <Content className="content">
                <div className="wrapper">
                    <div className="title">
                        <div>专项服务</div>
                        <div>Special service</div>
                    </div>
                    <div className="cards">
                        {_.map(typeList, item => (
                            <Card key={item.id} className="card" onClick={() => handleClick(item)}>
                                <div className="card-item">
                                    <div>{item.name}</div>
                                    <div>
                                        <Icons type={item.id} style={{}} />
                                    </div>
                                </div>
                            </Card>
                        ))}
                    </div>
                </div>
            </Content>
        </Layout>
    );
};

export default Home;
